<template>
     <div class="kinds">

      <div class="kinds-item" v-for="v in kindsList" :key="v.id">
        <i :class="['iconfont' ,`icon-${v.img}`]"></i>
        <p>{{v.name}}</p>
      </div>
    
    </div>
    <!-- {{ kindsList }} -->
</template>

<script setup>
import {defineProps} from "vue"

defineProps({
  "kindsList":Array
})

</script>

<style lang="scss" scoped>
.kinds{
  width: 90vw;
  height: 150px;
  position: absolute;
  top:110px;
  left:5vw;
  display: flex;
  justify-content: space-between;
  .kinds-item{
    width: 150px;
    height: 150px;
    background: white;
    border-radius:20px;
    text-align: center;
    line-height:50px;
    padding-top: 20px;
    i{
      font-size:50px;
      color: red;
      
    }
  }
}
</style>